<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('表单向导')"/>
    <th:block th:include="include :: jquery-smartwizard-css"/>
    <style type="text/css">
        /* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
        .sw > .toolbar-bottom {
            z-index: 100;
            bottom: 0px;
            left: 0;
            width: 100%;
            position: fixed;
            text-align: right;
            background: #fff;
            box-shadow: 0 -2px 6px 1px hsla(223, 8%, 83%, .5);
            border-top: 1px solid #e3e4e8;
        }

        /* 如果设置了是否自动调节高度为false,需要加滚动条 */
        .sw > .tab-content {
            overflow-x: hidden;
            overflow-y: auto;
        }

        /* 解决工具栏无法固定底部的问题（如果页面没有animated类可以不写这部分代码） */
        .animated {
            animation-fill-mode: none;
            -webkit-animation-fill-mode: none;
            -moz-animation-fill-mode: none;
            -o-animation-fill-mode: none;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        订单结账向导
                        <small></small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <div class="row select-list" style="padding-left: 15px; margin-bottom: 10px;">
                        <ul>
                            <!--<li>
                                选择样式：
                                <select id="theme-selector">
                                    <option value="default">Default</option>
                                    <option value="arrows" selected>Arrows</option>
                                    <option value="dots">Dots</option>
                                    <option value="progress">Progress</option>
                                </select>
                            </li>-->
                            <!-- 快速操作栏按钮 -->
                            <li>
                                <div class="btn-group-sm" role="group">
                                    <!--<a class="btn btn-info" id="prev-btn"> 上一步 </a>
                                    <a class="btn btn-success" id="next-btn"> 下一步 </a>
                                    <a class="btn btn-danger" id="reset-btn"> 重置 </a>-->
                                </div>
                            </li>
                        </ul>

                    </div>
                    <div id="smartwizard">
                        <ul class="nav">
                            <li class="nav-item">
                                <a id="btn-step-1" class="nav-link" href="#step-1"> 第一步 确认商品</a>
                            </li>
                            <li class="nav-item">
                                <a id="btn-step-2" class="nav-link" href="#step-2"> 第二步 支付方式</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-3"> 第三步 结算完成</a>
                            </li>
                            <!-- <li class="nav-item">
                                 <a class="nav-link" href="#step-4"> 第四步 </a>
                             </li>-->
                        </ul>
                        <div class="tab-content">
                            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                <div class="ibox-content p-xl">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <!-- <address>
                                                 <strong>北京百度在线网络技术有限公司</strong><br>
                                                 北京市海淀区上地十街10号<br>
                                                 <abbr title="Phone">总机：</abbr> (+86 10) 5992 8888
                                             </address>-->
                                        </div>

                                        <div class="col-sm-6 text-right">
                                            <h4>订单编号：</h4>
                                            <h4 class="text-navy">[[*{orderNo}]]</h4>
                                            <p><strong>桌位号：</strong> [[${restOrder.deskNum}]]</p>
                                            <!--<address>
                                                <strong>阿里巴巴集团</strong><br>
                                                中国杭州市华星路99号东部软件园创业大厦6层(310099)<br>
                                                <abbr title="Phone">总机：</abbr> (86) 571-8502-2088
                                            </address>-->
                                            <p>
                                                <span><strong>日期：</strong> [[${orderCreateTime}]]</span>
                                            </p>
                                        </div>
                                    </div>

                                    <div class="table-responsive m-t">
                                        <table class="table invoice-table">
                                            <thead>
                                            <tr>
                                                <th>商品清单</th>
                                                <th>数量</th>
                                                <th>单价</th>
                                                <!--<th>税率</th>
                                                <th>总价</th>-->
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="goods : ${orderGoodsList}">
                                                <td>
                                                    <div><strong>[[${goods.goodsName}]]</strong>
                                                    </div>
                                                </td>
                                                <td>[[${goods.goodsNum}]]</td>
                                                <td>[[${goods.goodsMoney}]]</td>
                                            </tr>


                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /table-responsive -->

                                    <table class="table invoice-total">
                                        <tbody>
                                        <tr>
                                            <td><strong>用餐人数：</strong>
                                            </td>
                                            <td>&yen;[[${restOrder.useMunber}]]</td>
                                        </tr>
                                        <tr>
                                            <td><strong>总价：</strong>
                                            </td>
                                            <td>&yen;[[${restOrder.money}]]</td>
                                        </tr>


                                        </tbody>
                                    </table>
                                    <!-- 打印网页时通过hidden-print隐藏元素 -->
                                    <div class="text-right hidden-print" th:hidden="${restOrder.state == 401}">
                                        <!--<button class="btn btn-primary" onclick="printPage()"><i
                                                class="fa fa-print"></i> 打印
                                        </button>-->
                                        <a class="btn btn-success next-btn"> 下一步 </a>
                                    </div>

                                    <div class="well m-t"><strong>注意：</strong> 请确认消费商品无误后，再进行下一步结账操作
                                    </div>
                                </div>
                            </div>
                            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                <div>
                                    <form id="payForm" class="form form-horizontal m-t">
                                        <input type="hidden" name="orderNo" th:value="${restOrder.orderNo}">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">会员手机号：</label>
                                            <div class="col-sm-8">
                                                <input id="phone" name="phone" type="text"
                                                       class="form-control" data-mask="999-9999-9999"
                                                       placeholder="请输入手机号码" onchange="checkMember()" th:disabled="${restOrder.state == 401}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">应付金额：</label>
                                            <div class="col-sm-8">
                                                <span>[[${restOrder.money}]]</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">实际支付金额：</label>
                                            <div class="col-sm-8">
                                                <input id="payMoney" name="payMoney" class="form-control"
                                                       type="text"
                                                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" th:disabled="${restOrder.state == 401}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-4 col-sm-offset-2" th:hidden="${restOrder.state == 401}">
                                                <input type="button" class="btn btn-primary" onclick="orderPay()" th:value="确认支付"/>
                                                <!--<button class="btn btn-primary" onclick="orderPay">确认支付</button>-->
                                            </div>
                                        </div>
                                    </form>
                                    <div class="well m-t"><strong>注意：</strong> 请确认会员是否存在，核对实际支付金额无误！
                                    </div>
                                </div>
                            </div>
                            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                                <div class="ibox-content">
                                    <h4>支付成功</h4>
                                    <p>你的订单已经结算完成了！</p>
                                    <p class="text-center">
                                        <a href="#"><i class="glyphicon glyphicon-saved big-icon"></i></a>
                                    </p>
                                    <input type="button" class="btn btn-primary" onclick="payClose()" th:value="关闭页面"/>
                                </div>
                            </div>
                            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                                <div class="m-t-md">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-smartwizard-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<script>
    var prefix = ctx + "rest/order"
    /*function printPage() {
        window.print();
    }*/
    $(document).ready(function () {
        // 工具栏按钮
        var btnFinish = $('<a id="btn-finish"></a>').text('完成')
            .addClass('btn btn-info')
            .on('click', function () {
                submit();
            });
        var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
            .addClass('btn btn-danger')
            .on('click', function () {
                $('#smartwizard').smartWizard("reset");
            });
        // 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
        var btnNext = $('<a id="btn-next"></a>').text('下一步')
            .addClass('btn btn-info')
            .on('click', function () {
                $('#smartwizard').smartWizard("next");
            });
        var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
            .addClass('btn btn-success disabled')
            .on('click', function () {
                $('#smartwizard').smartWizard("prev");
            });
        // 初始化表单向导组件
        $('#smartwizard').smartWizard({
            theme: 'arrows', // default, arrows, dots, progress
            autoAdjustHeight: false, // 自动调整高度, 默认true
            enableURLhash: false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            transition: {
                animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
            },
            toolbarSettings: {
                showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                //toolbarExtraButtons: [btnCancel, btnPrev, btnNext, btnFinish]// 扩展的按钮集合
            }
        });
    });

    function orderPay() {
        var data = {};
        var formData = $("#payForm").serializeArray();
        for (field of formData) {
            if (data[field.name]) {
                data[field.name] += ("," + field.value);
            } else {
                data[field.name] = field.value;
            }
        }
        if (data.phone) {
            data.phone = data.phone.replaceAll("-", "");
        }

        if (!data.payMoney) {
            $.modal.msgError("支付金额必须大于0");
            return;
        }
        var operate = {
            url: prefix + "/orderPay",
            type: 'post',
            dataType: 'json',
            data: data,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍候...");
            },
            success: function (res) {
                $.modal.closeLoading();
                if (res.code == 0) {
                    $(".next-btn").click();
                    $("#btn-step-1").attr("href","#");
                    $("#btn-step-2").attr("href","#");

                }
            },
        };
        $.ajax(operate);
    }
    function payClose() {
       $.modal.closeAll();

       /* var index =parent.layer.getFrameIndex();
        parent.layer.close(index);*/

    }
    //检查会员存不存在
    function checkMember() {
        var phone = $("#phone").val();
        $.operate.post(ctx + "rest/member/checkMember", {phone: phone.replaceAll("-", "")}, function (result) {
            if (result.code != 0) {
                $("#memberPhone").val("");
            }
        })
    }

    // 显示步骤时将触发事件
    /*$("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
        // 下面按钮是快速操作栏的
        $("#prev-btn").removeClass('disabled');
        $("#next-btn").removeClass('disabled');
        // 下面按钮是工具栏的
        $("#btn-prev").removeClass('disabled');
        $("#btn-next").removeClass('disabled');
        $("#btn-finish").removeClass('disabled');
        if (stepPosition === 'first') {
            $("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
            $("#btn-prev").addClass('disabled');
            $("#btn-finish").addClass('disabled');
        } else if (stepPosition === 'last') {
            $("#next-btn").addClass('disabled');// 快速操作栏（演示用）
            $("#btn-next").addClass('disabled');
        } else {
            $("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
            $("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
            $("#btn-prev").removeClass('disabled');
            $("#btn-next").removeClass('disabled');
            $("#btn-finish").addClass('disabled');
        }
    });*/

    // 该事件在离开某个步骤之前触发
    $("#smartwizard").on("leaveStep", function (e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
        if (stepDirection == 'forward') {
            var form = $("#step-" + (currentStepNumber + 1)).find('.form');
            if (form.length > 0) {
                return form.validate().form();
            }
            return true;
        }
        return true;
    });

    $("#theme-selector").on("change", function () {
        // Change theme
        var options = {
            theme: $(this).val()
        };
        $('#smartwizard').smartWizard("setOptions", options);
        return true;
    });

    $("#reset-btn").on("click", function () {
        // Reset wizard
        $('#smartwizard').smartWizard("reset");
        return true;
    });

    $("#prev-btn").on("click", function () {
        // Navigate previous
        $('#smartwizard').smartWizard("prev");
        return true;
    });

    $("#next-btn").on("click", function () {
        // Navigate next
        $('#smartwizard').smartWizard("next");
        return true;
    });
    $(".next-btn").on("click", function () {
        // Navigate next
        $('#smartwizard').smartWizard("next");
        return true;
    });
</script>
</body>
</html>
